<template>
	<div class="bg-babyblue">
		<BHeader :showLoginNow="curItem == 0"></BHeader>
		<div class="settleBox">
			<div class="settlecontainer">
				<div class="settleHeader">
					<div class="settleProgress">
					 	<Steps :current="curItem">
					 		<Step title="入驻注册" @click.native="lintTo(0)"></Step>
					        <Step title="营业执照信息" @click.native="lintTo(1)"></Step>
					        <Step title="道路运输经营许可证信息" @click.native="lintTo(2)"></Step>
					        <Step title="企业负责人信息" @click.native="lintTo(3)"></Step>
					 	</Steps>
					</div>
				</div>
				<div class="settleCont">
					<div v-if="curItem == 0 && isShowAlert" @click="closeFun('playSettle','playRegister','isShowSettle','isShowAlert')">
						<Alert type="warning" show-icon closable class="settleTips">
	                        <template slot="desc">
	                            <h4 class="title">入驻注册须知</h4>
	                            <p class="text">
	                                为能尽快提交入驻申请信息，请提前准备以下资料，并一次性提交：<span class="yellowT">• 营业执照照片；• 道路运输经营许可证照片；• 企业法人身份证正、反面照片。</span>
	注：以上所需要上传电子版资质仅支持JPG、GIF、PNG格式的图片，大小不超过1M，且必须加盖企业彩色公章。
	                            </p>
	                        </template>
	                    </Alert>
					</div>
					<div v-if="curItem != 0 && isShowSettle" @click="closeFun('playRegister','playSettle','isShowAlert','isShowSettle')">
						<Alert show-icon type="warning" class="settleTips" closable>
					        <template slot="desc">
					        	<h4 class="title">入驻信息提交须知</h4>
					        	<ol>
					        		<li>以下所需要上传电子版资质仅支持JPG、GIF、PNG格式的图片，大小不超过1M，且必须加盖企业彩色公章。</li>
									<li>以下信息为必填项（除额外说明）。 </li>
									<li>填写的信息需与相应的证件内容完全符合。</li>
					        	</ol>
					        </template>
					    </Alert>
					</div>
				    <keep-alive>
						<component :is="curShowCont" ref="settle" :settleForm="settleForm" @ItemProgress="ItemProgress" @lintTo="lintTo"></component>
				    </keep-alive>
					<div :class="['footer', {'register_ml': curItem == 0, 'bussiness_ml': curItem == 1, 'road_ml': curItem == 2, 'legalPerson_ml': curItem == 3}]">
						<Button type="primary" class="nextStepBtn" @click="lintTo(curItem+1)">{{nextTip}}</Button>
					</div>
				</div>
			</div>
		</div>
		<BFooter></BFooter>
	</div>
</template>
<script type="text/javascript">
import BHeader from 'components/BHeader'; //页脚
import BFooter from 'components/BFooter'; //页脚
import bussinessLicense from './component/bussinessLicense';
import roadLicense from './component/roadLicense';
import legalPersonInfo from './component/legalPersonInfo';
import register from './component/register';

	 export default {
	 	components: { bussinessLicense, roadLicense, legalPersonInfo, register, BHeader, BFooter },
	 	data() {
	 		return {
	 			isShowAlert: true,
	 			isShowSettle: true,
	 			playSettle: 0,
	 			playRegister: 0,
	 			curShowCont: 'register',
	 			curItem: 0,  //当前所在模块
	 			isValid: true,  //是否执行认证
	 			nextTip: '下一步',
				settleForm: {
	 				name: "",	//公司名称
					socialCode: "",	//统一社会信用代码
					businessType: "",	//维修企业经济类型
					addressProvinceCode: "440000",	//营业执照省份
					addressCityCode: "440400",	//营业执照城市
					// addressCountyCode: "",//营业执照区县
					address: "",	//营业执照详细地址
					scope: "",	//经营范围
					businessPhoto: "",	//营业执照副本电子版
					licenseNo: "",	//道路运输经营许可证号
					licensePublish: new Date(),	//道路经营许可证发证日期
					licenseBegin: new Date(),	//道路经营许可证开始日期
					licenseEnd: new Date(),	//道路经营许可证结束日期
					provinceCode: '440000', //所属管辖区域
					cityCode: '440400', //所属管辖区域
					countyCode: '440402', //所属管辖区域
					category: "",	//企业经营业务类别
					businessDetailType: [],  //企业经营范围
					roadPhoto: "",	//道路运输经营许可证信本电子版
					legalPerson: "",	//法人负责人姓名
					IDNumber: "",	//身份证件号
					legalMobile: "",	//法人手机号码
					idfront: "",	//法人身份证件电子版（正面）
					idback: "",	//法人身份证件电子版（反面）
					is_status: '2',	//企业资料完整默认为2，后台系统默认未完整为1
					contactName: '',	//企业联系人姓名
					mobile: '',		//企业联系人联系方式
					password: '',
					status: 1
	 			}
	 		}
	 	},
	 	methods: {
	 		closeFun(who, whoAdd, whoShow, whoHidden) {  //避免关闭警告提示全部关闭
 				this[whoHidden] = false;
 				this[whoAdd] ++;
	 			if(this[who] == 0) {
	 				this[whoShow] = true;
	 			}else{
	 				this[whoShow] = false;
	 			}
	 		},
	 		ItemProgress() {  //增加步骤条--点击下一步是调用
	 			console.log(this.curItem)
	 			if(this.curItem == 3){  //最后一步执行入驻
	 				console.log('this.settleForm')
	 				console.log(this.settleForm)
	 				// return
	 				this.$ajax(this.$api.settle.settleCreate, this.settleForm, (data)=>{
	 					console.log('入驻')
	 					console.log(data)
	 					if(data.code == 200){
	 						this.$Message.success('成功提交入驻信息！等待审核...');
	 						this.$router.replace('/settleProgress');
	 					}
	 					else if(data.code == 400){
	                        this.$Message.error('手机号被注册！');
	 					}
	 					else if(data.code == 456){
	                        this.$Message.error('mobile not verified');
	 					}else if(data.code == 457){
	                        this.$Message.error('cityCode必填！');
	 					}else if(data.code == 462 || data.code == 463 || data.code == 461){
	                        this.$Message.error('日期格式错误！');
	 					}else if(data.code == 500){
	                        this.$Message.error('服务器出错！');
	 					}
	 				}, (error)=>{
	 					console.log(error)
	 				})
	 			}
	 		},
	 		lintTo(item, play) {  //点击下一步
		 		this.nextTip = '下一步';
	 			if(item == 0){
	 				this.curItem = 0;
		 			this.curShowCont = 'register';
	 			}
	 			else if(item == 1){
	 				if(!play && item > this.curItem) {
	 					this.$refs.settle.validateFun();
	 				}else{
						this.curItem = 1;
		 				this.curShowCont = 'bussinessLicense';
	 				}
	 			}else if(item == 2){
	 				if(!play && item > this.curItem) {
	 					this.$refs.settle.validateFun();
	 				}else{
	 					this.curItem = 2;
		 				this.curShowCont = 'roadLicense'
	 				}
	 			}else if(item == 3) {
	 				if(!play && item > this.curItem) { 
	 					this.$refs.settle.validateFun();
	 				}else{
		 				this.curItem = 3;
			 			this.nextTip = '提交入驻信息';
		 				this.curShowCont = 'legalPersonInfo';
		 			}
	 			}else{  //点击提交入驻信息
		 			this.nextTip = '提交入驻信息';
	 				this.$refs.settle.validateFun();
	 			}
	 		}
	 	}
	 }
</script>

<style lang="less" rel="stylesheet/less">
.bg-babyblue {
	background: @color-Background;
}
.settleBox {
	padding: 40px 0 80px;
	.settlecontainer {
		width: @min-width;
		margin: 0 auto;
		.settleHeader {
			width: 1000px; 
			margin: 0 auto;
			.settleProgress {
				width: 100%;
				display: inline-block;
				margin-top: 40px;
				margin-bottom: 25px;
			    overflow: hidden;
				.ivu-btn {
					width: 100px;
					height: 42px;
					margin-top: -10px;
					font-size: 16px;
					float: left;
				}
				.ivu-steps .ivu-steps-head-inner {
					width: 32px;
					height: 32px;
					font-size: 18px;
					line-height: 28px;
					border-color: @color-Primary;
					border-width: 2px;
				}
				.ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner,
				.ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner {
					background: @color-Primary;
				}
				.ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner span {
					color: @color-Primary;
					font-size: 18px;
				}
				.ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner > .ivu-steps-icon, .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner span {
					color: #fff;
					font-size: 30px;
				}
				.ivu-steps .ivu-steps-title {
					font-weight: normal;
					color: @color-Title;
					font-size: 16px;
				}
				.ivu-steps .ivu-steps-head,
				.ivu-steps .ivu-steps-title {
					background: #F6FAFB;
				}
				.ivu-steps .ivu-steps-main {
					display: inline-block;
					cursor: pointer;
				}
				.ivu-steps-item {
					&:last-child {
						text-align: right;
					}
					&:nth-child(2) {
						padding-right: 10px;
					}
					&:nth-child(3) {
						padding-left: 10px;
					}
				}
				.ivu-steps .ivu-steps-tail > i {
					background: @color-Border;
				}
				.ivu-steps-item:nth-child(3) .ivu-steps-tail i {
					margin-left: 104px;
				}
			}
		}
	}
	
	//切换模块-
	.settleCont {
		background: #fff;
		width: 100%;
		margin: 0 auto;
		padding: 40px 100px;
		text-align: center;
		.mt40 {
			margin-top: 40px;
		}
		.borderB {
    		border-bottom: 1px solid #D7DDE4;
    	}
		.settleTips {
			width: 1000px;
			height: 115px;
			margin: auto;
			color: @color-Sub;
			.ivu-alert-icon {
                font-size: 36px;
                margin-top: -27px;
            }
            .ivu-alert-desc {
        	    margin-right: 20px;
			    margin-left: 10px;
            }
            .ivu-alert-with-icon {
                padding-right: 78px;
            }
            .ivu-alert-close .ivu-icon-ios-close-empty {
            	font-size: 30px;
            }
			ol {
				list-style: decimal;
				li {
					list-style-position: inside;
				}
			}
			.text {
                line-height: 20px;
                .yellowT {
                    font-family: "PingFangSC-Regular";
                    color: @color-Warning;
                }
            }
            .title {
            	margin-bottom: 5px;
                font-family: "PingFangSC-Medium";
                color: @color-Warning;
                font-size: 14px;
            }
		}
		.settleFail {
			margin: 20px 10px 10px;
		}
		.ivu-form-item-label {
            font-size: 14px;
            color: @color-Content;
        }
        .ivu-input {
        	width: 100%;
            height: 40px;
           // line-height: 42px;
            background: #FFFFFF;
            border: 0.5px solid @color-Border;
            border-radius: 2px;
            font-size: 14px;
        }
        .ivu-form-label-left .ivu-form-item-label {
        	text-align: right;
        	padding-right: 24px;
        } 
        .ivu-form-item-required .ivu-form-item-label:before {
        	content: ''
        }
        .settleInfoBox {
        	display: inline-block;
            margin: 30px auto 0;
        }
        .ivu-select-single .ivu-select-selection {
        	height: 40px;
        	line-height: 40px;
            border: 0.5px solid @color-Border;
            border-radius: 2px;
            .ivu-select-placeholder,.ivu-select-selected-value {
            	height: 38px;
            	line-height: 38px;
            }
        }
        .settleContItem {
        	width: 100%;
        	.title {
	        	padding-left: 5px;
	        	padding-top: 20px;
	        	margin-bottom: 23px;
	        	font-size: 14px;
	        }
	        .imgBoxForm {
	        	width: 100%;
	        	.ivu-form-item-error-tip {
		        	top: 83px;
	        	}
	        }
        }
        .InputNone {
        	position: absolute;
        	bottom: 0;
        	width: auto;
        	height: 0;
        	opacity: 0;
        }
	}
	.footer{
	 	.nextStepBtn {
	 		width: 500px;
		 	height: 40px;
		 	border-color: @color-Primary;
	 		background: @color-Primary;
	 	}
	}
	.register_ml {
		margin-left: 114px;
	}
	.bussiness_ml {
		margin-left: 150px;
	}
	.road_ml {
		margin-left: 216px;
	}
	.legalPerson_ml {
		margin-left: 164px;
	}
}

</style>